import { resourceCustomAdd, resourceCustomUpdate } from "@/services/chargingManage";
import { DatePicker, Form, Input, InputNumber, message, Modal } from "antd";
import moment from "moment";
import React from "react";

class CustomResource extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      data:null
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initModal = data => {
    this.setState({
      visible:true,
      data
    },() => {
      if(data){
        const { columns } = this.props;
        let keys = {}
        columns.map(item => {
          if(item.dataIndex && item.dataIndex != 'name'){
            if(item.dataIndex == 'activationDate' || item.dataIndex == 'disableDate'){
              keys[item.dataIndex] = data[item.dataIndex] ? moment(data[item.dataIndex] ) : null
            }else{
              keys[item.dataIndex] = data[item.dataIndex]
            }
          }
        })
        this.props.form.setFieldsValue(keys)
      }
    })
  }

  doCancel = () => {
    this.props.form.resetFields()
    this.setState({
      visible:false,
      data:null
    })
  }

  validateForm = () => {
    this.props.form.validateFields((error,values) => {
      if(!error){
        values.activationDate = values.activationDate ? moment(values.activationDate).format("YYYY-MM-DD") : ''
        values.disableDate = values.disableDate ? moment(values.disableDate).format("YYYY-MM-DD") : ''
        console.log(values);
        this.doOk(values)
        
      }
    })
  }

  doOk = async values => {
    const { data } = this.state;
    let res = {}
    if(data){
      values.id = data.id
      res = await resourceCustomUpdate(values)
    }else{
      res = await resourceCustomAdd(values)
    }

    if(res.code == -1){}else{
      message.info(res.message)
      this.props.refreshList()
      this.doCancel()
    }
  }

  changeDate = field => {
    if(field == 'activationDate'){
      this.props.form.resetFields(["disableDate"])
    }
  }

  disabledEndDate = (value,field) => {
    if(field != 'disableDate'){
      return false
    }
    const startValue = this.props.form.getFieldValue("activationDate")
    
    if (!value || !startValue) {
      return false;
    }
    return value.valueOf() <= startValue.valueOf();
  };

  render(){
    const { visible,data } = this.state;
    const { form:{getFieldDecorator,getFieldValue},columns } = this.props;

    return (
      <Modal
        title={data ? '编辑自定义资源' : '新增自定义资源'}
        visible={visible}
        onCancel={this.doCancel}
        onOk={this.validateForm}
        bodyStyle={{height:'80vh',overflowY:"auto"}}
        centered={true}
      >
        <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
          {
            columns.map((item,index) => {
              return item.dataIndex == 'activationDate' || item.dataIndex == 'disableDate' ? (
                <Form.Item key={index} label={item.title}>
                  {
                    getFieldDecorator(item.dataIndex,{rules:[{required:false,message:"请输入"}]})(
                      <DatePicker 
                        disabled={item.dataIndex == 'disableDate' && !getFieldValue("activationDate")} 
                        onChange={() => this.changeDate(item.dataIndex)} 
                        disabledDate={(value) => this.disabledEndDate(value,item.dataIndex)}
                      />
                    )
                  }
                </Form.Item>
              ) :
              item.dataIndex == 'disableThreshold' || item.dataIndex == 'reminderThreshold' || item.dataIndex =='toleranceCoefficient' ? (
                <Form.Item key={index} label={item.title}>
                  {
                    getFieldDecorator(item.dataIndex,{rules:[{required:item.dataIndex == 'name',message:"请输入"}]})(
                      <InputNumber min={0} />
                    )
                  }
                </Form.Item>
              ) : item.dataIndex != 'name' && item.dataIndex ? (
                <Form.Item key={index} label={item.title}>
                  {
                    getFieldDecorator(item.dataIndex,{rules:[{required:item.dataIndex == 'name',message:"请输入"}]})(
                      <Input disabled={(item.dataIndex == 'resourceName' || item.dataIndex == 'resourceUnit') && data && data.resourceType != 16} />
                    )
                  }
                </Form.Item>
              ) :''
            })
          }
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(CustomResource)